import { Button, Input, Form ,Dialog} from "antd-mobile";
import { EyeOutline } from "antd-mobile-icons";
import { EyeInvisibleOutline } from "antd-mobile-icons";
import React, { useState } from "react";
import s from "./style.module.less";
const LoginRegister = ({ isLogin, children }) => {
  const prefix = isLogin ? "login" : "register"; // 根据 tab 确定前缀
  const userIdId = `${prefix}-userId`; // 动态生成唯一的 id
  const passwordId = `${prefix}-password`; // 动态生成唯一的 id
  const [visible, setVisible] = useState(false); 
  const onFinish = (values ) => {
    Dialog.alert({
      content: <pre>{JSON.stringify(values, null, 2)}</pre>,
    })
  }
  return (
    <Form
      layout="horizontal"
      onFinish={onFinish}
      footer={
        <Button 
          block
          type="submit"
          color="primary"
          size="large"
        >
          提交
        </Button>
      }
    >
      <Form.Item
        name="userId"
        label="用户名"
        rules={[{ required: true, message: "用户名不能为空" }]}
      >
        <Input
          id={userIdId}
          autoComplete="username"
          clearable
          onChange={console.log}
          placeholder="请输入用户名"
        />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: "密码不能为空" }]}
        extra={
          <div className={s.eye}>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        }
      >
        <Input
          id={passwordId}
          autoComplete="current-password"
          clearable
          onChange={console.log}
          placeholder="请输入密码"
          type={visible ? "text" : "password"}
        />
      </Form.Item>
      {!isLogin && children}
    </Form>
  );
};
export default LoginRegister;
